<template>
	<div class="QRCode" :style="{ 'width': width, 'height': height }">
		<canvas :id="canvasId" ref="canvas" :style="{ 'width': width, 'height': height }"></canvas>
	</div>
</template>

<script>
import QRCode from "qrcode";

export default {
	name: "QRCode",
	props: {
		content: {
			type: String,
			default: "测试二维码"
		},
		width: {
			type: String,
			default: "100"
		},
		height: {
			type: String,
			default: "100"
		},
		codeName: {
			type: String,
			default: "二维码"
		},
		load: {
			type: Boolean,
			default: true
		},
		view: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			canvasId: "",

		};
	},
	computed: {},
	created() {
		this.canvasId = this.getUUID();
		this.$nextTick(() => {
			this.init();
		});
	},
	mounted: function () {
	},
	methods: {

		// handlePrintText() {
		//   this.$print(this.$refs.print)
		// },
		// // 打印二维码
		// getPrinting() {
		//   let employeeName = "溯源信息";
		//   let printContent = ''
		//   document.getElementById("qrcode").innerHTML = printContent;
		//   let new_str = document.getElementById("qrcode").innerHTML; //获取指定打印区域
		//   //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
		//   document.body.innerHTML = new_str;
		//   for (let j = 0; j < 1; j++) {
		//     document.getElementById("XQ").innerHTML = ""; //置空
		//     new QRCode(document.getElementById("XQ"), {
		//       text: "dfjkdjdfjak123456789",
		//       width: 250,
		//       height: 250,
		//       colorDark: "#000000",
		//       colorLight: "#ffffff",
		//     });
		//   }
		//   window.print(); //打印刚才新建的网页
		//   window.location.reload();
		//   return false;
		// },
		saveCode() {
			//下载二维码
			console.log('二维码', this.$refs.canvas);
			let base64Img = this.$refs.canvas.toDataURL('image/jpg');
			//创建下载标签，然后设置链接和图片名称
			let a = document.createElement('a')
			a.href = base64Img
			a.download = '二维码' + Date.now()
			a.click()
			//销毁元素
			a.remove()
		},
		init() {
			let width = this.width,
				height = this.height;
			QRCode.toCanvas(
				document.getElementById(this.canvasId),
				this.content,
				{ width, height, toSJISFunc: QRCode.toSJIS },
			);
		},
		getUUID() {
			let d = new Date().getTime();
			let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
				/[xy]/g,
				function (c) {
					let r = (d + Math.random() * 16) % 16 | 0;
					d = Math.floor(d / 16);
					return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
				}
			);
			return uuid;
		}
	},
	watch: {
		content() {
			this.init();
		}
	}
};
</script>
<style lang="scss" scoped>
.QRCode {
	display: inline-block;
	position: relative;
	overflow: hidden;

	.QQMode {
		position: absolute;
		left: 0;
		bottom: 100%;
		right: 0;
		height: 0;
		background-color: rgba(0, 0, 0, 0.45);
		transition: all 200ms ease-in-out;
		cursor: pointer;
		color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 20px;
		font-weight: bolder;
		box-sizing: border-box;
		padding: 10px;
	}
}

.QRCode:hover .QQMode {
	bottom: 0;
	height: 100%;
}
</style>